<template>
  <view>
    <view>
      <head-bar-view title="楼栋详情" title-color="#fff" is-white-back="true"/>
      <view class="hint-address">
        <view>{{ name }}</view>
        <view class="f_row_center" style="font-size: 28rpx;color: #646464">
          <image src="/static/address.png" style="min-width: 30rpx;height: 30rpx;margin-right: 12rpx"/>
          {{ address }}
        </view>
      </view>
      <view class="info-card">
        <item-img-title-view title="基本信息" style="margin-bottom: 20rpx"/>
        <item-content-view class="item_text" style="margin-left: 0" :list="content"/>
      </view>
      <view class="info-card">
        <item-img-title-view :title="'楼栋信息('+info.list.length+')'" style="margin-bottom: 20rpx"/>
        <view v-for="(item,ind) in info.list" :key="ind">
          <item-area-card-view :content="itemContent(item)" :name="item.buildingname"/>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts">
import {Vue, Component} from "vue-property-decorator";
import BaseApi from "@/api/BaseApi";
import HeadBarView from "@/pages/components/head_bar_view.vue";
import ItemBlueTitleView from "@/pages/components/item_blue_title_view.vue";
import ItemUnitCardView from "@/pages/house/components/item_unit_card_view.vue";
import ApiDefine from "@/api/ApiDefine";
import BaseUtils from "@/utils/base_utils";
import ItemAreaCardView from "@/pages/data/components/item_area_card_view.vue";
import {mixins} from "vue-class-component";
import TypeConfig from "@/mixins/TypeConfig";
import ItemContentView from "@/pages/data/components/item_content_view.vue";
import ItemImgTitleView from "@/pages/components/item_img_title_view.vue";

@Component({
  components: {
    HeadBarView,
    ItemBlueTitleView,
    ItemAreaCardView,
    ItemContentView,
    ItemImgTitleView,

  }
})
export default class DataAreaDetailsView extends mixins(Vue, TypeConfig) {

  onLoad(options: any) {
    this.initData(options.oaid ?? '')
  }

  get content() {
    return [
      {
        img: '',
        title: '用地面积：',
        content: `${this.info.officeArea?.areaSize ?? ''}㎡`,
      },
      {
        img: '',
        title: '建设年代：',
        content: `${this.getYear}年`,
      },
      {
        img: '',
        title: '权属登记：',
        content: `${this.qsdjqkType[this.info.officeArea?.qsdjqk]}`,
      },
    ];
  }

  get name() {
    return this.info.officeArea?.areaName ?? '';
  }

  get address() {
    return this.info.officeArea?.address ?? '';
  }
  

  get getYear() {
    return new Date(this.info.officeArea?.buildyear).getFullYear()
  }
  

  info: any = {
    list: [],
  };

  itemContent(item: any) {
    return [
      {
        img: '',
        title: '建筑面积：',
        content: `${item.housesque}㎡`,
      },
      {
        img: '',
        title: '总层数：',
        content: `${item.floornum}`,
      },
      {
        img: '',
        title: '建设年代：',
        content: `${this.buildYear(item)}年`,
      },
      {
        img: '',
        title: '年权属登记情况：',
        content: `${item.qsdjqk}`,
      },
    ];
  }

  buildYear(item: any) {
    return new Date(item.floornum).getFullYear()
  }


  async initData(oaid: any) {
    let value = await BaseApi.instance().fetch(ApiDefine.USE_AREA_DETAILS_URL, {
      oaid: oaid,
    })
    if (value == null || value.code != 200) {
      return;
    }
    this.info = value.data;
  }
}
</script>

<style scoped>
.hint-address {
  box-shadow: 0px 10rpx 30rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  backdrop-filter: blur(10rpx);
  margin: 30rpx;
  padding: 30rpx;
}

.info-card {
  background: #FFFFFF;
  box-shadow: 0px 10rpx 30rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 20rpx;
  padding: 30rpx;
  color: #646464;
  margin: 30rpx;
  font-size: 25rpx;
}
</style>